<template>
  <div class="settings-panel">
    <div class="settings-header">
      <h2>游戏设置</h2>
      <p class="subtitle">自定义您的游戏体验</p>
    </div>
    
    <div class="settings-content">
      <!-- 音频设置 -->
      <div class="settings-section">
        <h3 class="section-title">
          <i class="section-icon">🔊</i>
          音频设置
        </h3>
        
        <div class="setting-group">
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">背景音乐</label>
              <p class="setting-description">控制游戏背景音乐的播放</p>
            </div>
            <div class="setting-control">
              <ToggleSwitch 
                v-model="localSettings.musicEnabled"
                @update:modelValue="updateSetting('musicEnabled', $event)"
              />
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">音效</label>
              <p class="setting-description">控制游戏音效的播放</p>
            </div>
            <div class="setting-control">
              <ToggleSwitch 
                v-model="localSettings.soundEnabled"
                @update:modelValue="updateSetting('soundEnabled', $event)"
              />
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">主音量</label>
              <p class="setting-description">调整整体音量大小</p>
            </div>
            <div class="setting-control">
              <VolumeSlider 
                v-model="localSettings.masterVolume"
                @update:modelValue="updateSetting('masterVolume', $event)"
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 控制设置 -->
      <div class="settings-section">
        <h3 class="section-title">
          <i class="section-icon">🎮</i>
          控制设置
        </h3>
        
        <div class="setting-group">
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">控制方案</label>
              <p class="setting-description">选择您偏好的控制方式</p>
            </div>
            <div class="setting-control">
              <select 
                v-model="localSettings.controlScheme"
                @change="updateSetting('controlScheme', ($event.target as HTMLSelectElement).value as 'keyboard' | 'touch')"
                class="control-select"
              >
                <option value="keyboard">键盘控制</option>
                <option value="touch">触摸控制</option>
              </select>
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">按键绑定</label>
              <p class="setting-description">自定义游戏按键</p>
            </div>
            <div class="setting-control">
              <button 
                class="btn btn-secondary btn-small"
                @click="showKeyBindings = !showKeyBindings"
              >
                {{ showKeyBindings ? '隐藏' : '显示' }}按键设置
              </button>
            </div>
          </div>
          
          <!-- 按键绑定详情 -->
          <div v-if="showKeyBindings" class="key-bindings-section">
            <div class="key-bindings-grid">
              <div 
                v-for="binding in keyBindings"
                :key="binding.action"
                class="key-binding-item"
              >
                <div class="binding-info">
                  <span class="action-name">{{ binding.name }}</span>
                  <span class="action-description">{{ binding.description }}</span>
                </div>
                <button 
                  class="key-button"
                  :class="{ recording: recordingKey === binding.action }"
                  @click="startKeyBinding(binding.action)"
                >
                  {{ recordingKey === binding.action ? '按下按键...' : binding.key }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 游戏设置 -->
      <div class="settings-section">
        <h3 class="section-title">
          <i class="section-icon">⚙️</i>
          游戏设置
        </h3>
        
        <div class="setting-group">
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">难度等级</label>
              <p class="setting-description">选择游戏难度</p>
            </div>
            <div class="setting-control">
              <select 
                v-model="localSettings.difficulty"
                @change="updateSetting('difficulty', ($event.target as HTMLSelectElement).value as 'easy' | 'normal' | 'hard')"
                class="difficulty-select"
              >
                <option value="easy">简单 - 适合新手</option>
                <option value="normal">普通 - 平衡体验</option>
                <option value="hard">困难 - 挑战极限</option>
              </select>
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">自动暂停</label>
              <p class="setting-description">窗口失去焦点时自动暂停</p>
            </div>
            <div class="setting-control">
              <ToggleSwitch 
                v-model="autoPauseEnabled"
                @update:modelValue="updateAutoPause"
              />
            </div>
          </div>
          
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">显示性能信息</label>
              <p class="setting-description">显示FPS和性能统计</p>
            </div>
            <div class="setting-control">
              <ToggleSwitch 
                v-model="showPerformanceInfo"
                @update:modelValue="updatePerformanceInfo"
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 数据管理 -->
      <div class="settings-section">
        <h3 class="section-title">
          <i class="section-icon">💾</i>
          数据管理
        </h3>
        
        <div class="setting-group">
          <div class="setting-item">
            <div class="setting-info">
              <label class="setting-label">游戏数据</label>
              <p class="setting-description">备份或重置您的游戏数据</p>
            </div>
            <div class="setting-control">
              <div class="data-actions">
                <button class="btn btn-secondary btn-small" @click="exportGameData">
                  <i class="btn-icon">📤</i>
                  导出数据
                </button>
                <button class="btn btn-secondary btn-small" @click="importGameData">
                  <i class="btn-icon">📥</i>
                  导入数据
                </button>
                <button class="btn btn-danger btn-small" @click="confirmResetData">
                  <i class="btn-icon">🗑️</i>
                  重置数据
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="settings-actions">
      <button class="btn btn-primary" @click="saveAllSettings">
        <i class="btn-icon">💾</i>
        保存设置
      </button>
      <button class="btn btn-secondary" @click="resetToDefaults">
        <i class="btn-icon">🔄</i>
        恢复默认
      </button>
    </div>
    
    <!-- 确认对话框 -->
    <ConfirmDialog 
      v-if="showConfirmDialog"
      :title="confirmDialog.title"
      :message="confirmDialog.message"
      :confirmText="confirmDialog.confirmText"
      :cancelText="confirmDialog.cancelText"
      :type="confirmDialog.type"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
    
    <!-- 通知消息 -->
    <NotificationToast 
      v-if="notification.show"
      :message="notification.message"
      :type="notification.type"
      :duration="notification.duration"
      @close="closeNotification"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useGameStore } from '@/stores/gameStore'
import type { GameSettings } from '@/stores/gameStore'
import ToggleSwitch from './ui/ToggleSwitch.vue'
import VolumeSlider from './ui/VolumeSlider.vue'
import ConfirmDialog from './ui/ConfirmDialog.vue'
import NotificationToast from './ui/NotificationToast.vue'

/**
 * 设置面板组件
 * 提供游戏设置的管理界面，包括音频、控制、游戏选项等
 * @component
 * @example
 * <SettingsPanel @settings-changed="handleSettingsChanged" />
 */

interface KeyBinding {
  action: string
  name: string
  description: string
  key: string
}

interface ConfirmDialogData {
  title: string
  message: string
  confirmText: string
  cancelText: string
  type: 'warning' | 'danger' | 'info'
  action: () => void
}

interface NotificationData {
  show: boolean
  message: string
  type: 'success' | 'error' | 'warning' | 'info'
  duration: number
}

// 定义事件
const emit = defineEmits<{
  settingsChanged: [settings: GameSettings]
}>()

const gameStore = useGameStore()

// 响应式数据
const localSettings = reactive<GameSettings>({ ...gameStore.settings })
const autoPauseEnabled = ref(true)
const showPerformanceInfo = ref(false)
const showKeyBindings = ref(false)
const recordingKey = ref('')

const keyBindings = ref<KeyBinding[]>([
  {
    action: 'jump',
    name: '跳跃',
    description: '让角色跳跃',
    key: 'Space'
  },
  {
    action: 'slide',
    name: '滑铲',
    description: '让角色滑铲',
    key: 'ArrowDown'
  },
  {
    action: 'moveLeft',
    name: '向左移动',
    description: '在多车道间向左切换',
    key: 'ArrowLeft'
  },
  {
    action: 'moveRight',
    name: '向右移动',
    description: '在多车道间向右切换',
    key: 'ArrowRight'
  },
  {
    action: 'pause',
    name: '暂停游戏',
    description: '暂停或恢复游戏',
    key: 'Escape'
  }
])

const showConfirmDialog = ref(false)
const confirmDialog = ref<ConfirmDialogData>({
  title: '',
  message: '',
  confirmText: '确认',
  cancelText: '取消',
  type: 'warning',
  action: () => {}
})

const notification = reactive<NotificationData>({
  show: false,
  message: '',
  type: 'info',
  duration: 3000
})

/**
 * 更新设置项
 * @param key - 设置键名
 * @param value - 设置值
 */
const updateSetting = <K extends keyof GameSettings>(key: K, value: GameSettings[K]): void => {
  localSettings[key] = value
  
  // 立即应用某些设置
  if (key === 'masterVolume' || key === 'musicEnabled' || key === 'soundEnabled') {
    applyAudioSettings()
  }
  
  console.log(`设置更新: ${key} = ${value}`)
}

/**
 * 应用音频设置
 */
const applyAudioSettings = (): void => {
  // 这里应该调用音频管理器来应用设置
  // 例如: AudioManager.setMasterVolume(localSettings.masterVolume)
  console.log('应用音频设置:', {
    masterVolume: localSettings.masterVolume,
    musicEnabled: localSettings.musicEnabled,
    soundEnabled: localSettings.soundEnabled
  })
}

/**
 * 更新自动暂停设置
 * @param enabled - 是否启用
 */
const updateAutoPause = (enabled: boolean): void => {
  autoPauseEnabled.value = enabled
  console.log('自动暂停设置:', enabled)
}

/**
 * 更新性能信息显示
 * @param enabled - 是否显示
 */
const updatePerformanceInfo = (enabled: boolean): void => {
  showPerformanceInfo.value = enabled
  console.log('性能信息显示:', enabled)
}

/**
 * 开始按键绑定
 * @param action - 动作名称
 */
const startKeyBinding = (action: string): void => {
  recordingKey.value = action
  
  const handleKeyDown = (event: KeyboardEvent): void => {
    event.preventDefault()
    
    const binding = keyBindings.value.find(b => b.action === action)
    if (binding) {
      binding.key = event.code
      showNotification('按键绑定已更新', 'success')
    }
    
    recordingKey.value = ''
    document.removeEventListener('keydown', handleKeyDown)
    
    console.log(`按键绑定更新: ${action} = ${event.code}`)
  }
  
  document.addEventListener('keydown', handleKeyDown)
  
  // 10秒后自动取消录制
  setTimeout(() => {
    if (recordingKey.value === action) {
      recordingKey.value = ''
      document.removeEventListener('keydown', handleKeyDown)
      showNotification('按键绑定超时取消', 'warning')
    }
  }, 10000)
}

/**
 * 导出游戏数据
 */
const exportGameData = (): void => {
  try {
    const gameData = {
      settings: localSettings,
      keyBindings: keyBindings.value,
      gameStats: gameStore.gameStats,
      scoreRecords: gameStore.scoreRecords,
      characterData: gameStore.characterManager.serialize(),
      exportDate: new Date().toISOString(),
      version: '1.0.0'
    }
    
    const dataStr = JSON.stringify(gameData, null, 2)
    const dataBlob = new Blob([dataStr], { type: 'application/json' })
    
    const link = document.createElement('a')
    link.href = URL.createObjectURL(dataBlob)
    link.download = `parkour-game-backup-${new Date().toISOString().split('T')[0]}.json`
    link.click()
    
    URL.revokeObjectURL(link.href)
    showNotification('游戏数据导出成功', 'success')
    
    console.log('游戏数据导出成功')
  } catch (error) {
    console.error('导出游戏数据失败:', error)
    showNotification('导出失败，请重试', 'error')
  }
}

/**
 * 导入游戏数据
 */
const importGameData = (): void => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.json'
  
  input.onchange = (event: Event) => {
    const file = (event.target as HTMLInputElement).files?.[0]
    if (!file) return
    
    const reader = new FileReader()
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target?.result as string)
        
        // 验证数据格式
        if (!data.version || !data.settings) {
          throw new Error('无效的数据格式')
        }
        
        // 导入设置
        if (data.settings) {
          Object.assign(localSettings, data.settings)
        }
        
        // 导入按键绑定
        if (data.keyBindings) {
          keyBindings.value = data.keyBindings
        }
        
        // 导入其他数据
        if (data.characterData) {
          gameStore.characterManager.deserialize(data.characterData)
        }
        
        showNotification('游戏数据导入成功', 'success')
        console.log('游戏数据导入成功')
      } catch (error) {
        console.error('导入游戏数据失败:', error)
        showNotification('导入失败：文件格式不正确', 'error')
      }
    }
    
    reader.readAsText(file)
  }
  
  input.click()
}

/**
 * 确认重置数据
 */
const confirmResetData = (): void => {
  showConfirmDialog.value = true
  confirmDialog.value = {
    title: '重置所有数据',
    message: '这将删除所有游戏数据，包括分数、成就、角色进度和设置。此操作不可撤销，确定要继续吗？',
    confirmText: '确认重置',
    cancelText: '取消',
    type: 'danger',
    action: resetAllData
  }
}

/**
 * 重置所有数据
 */
const resetAllData = (): void => {
  try {
    // 重置设置到默认值
    Object.assign(localSettings, {
      soundEnabled: true,
      musicEnabled: true,
      masterVolume: 80,
      controlScheme: 'keyboard',
      difficulty: 'normal'
    })
    
    // 重置按键绑定
    keyBindings.value = [
      { action: 'jump', name: '跳跃', description: '让角色跳跃', key: 'Space' },
      { action: 'slide', name: '滑铲', description: '让角色滑铲', key: 'ArrowDown' },
      { action: 'moveLeft', name: '向左移动', description: '在多车道间向左切换', key: 'ArrowLeft' },
      { action: 'moveRight', name: '向右移动', description: '在多车道间向右切换', key: 'ArrowRight' },
      { action: 'pause', name: '暂停游戏', description: '暂停或恢复游戏', key: 'Escape' }
    ]
    
    // 重置其他设置
    autoPauseEnabled.value = true
    showPerformanceInfo.value = false
    
    // 清除本地存储
    localStorage.removeItem('vue-parkour-game')
    localStorage.removeItem('gameSettings')
    localStorage.removeItem('keyBindings')
    
    showNotification('所有数据已重置', 'success')
    console.log('所有数据已重置')
  } catch (error) {
    console.error('重置数据失败:', error)
    showNotification('重置失败，请重试', 'error')
  }
}

/**
 * 保存所有设置
 */
const saveAllSettings = (): void => {
  try {
    // 保存到游戏存储
    gameStore.updateSettings(localSettings)
    
    // 保存到本地存储
    const settingsData = {
      ...localSettings,
      autoPauseEnabled: autoPauseEnabled.value,
      showPerformanceInfo: showPerformanceInfo.value,
      keyBindings: keyBindings.value
    }
    
    localStorage.setItem('gameSettings', JSON.stringify(settingsData))
    
    // 触发事件
    emit('settingsChanged', localSettings)
    
    showNotification('设置保存成功', 'success')
    console.log('设置保存成功')
  } catch (error) {
    console.error('保存设置失败:', error)
    showNotification('保存失败，请重试', 'error')
  }
}

/**
 * 恢复默认设置
 */
const resetToDefaults = (): void => {
  showConfirmDialog.value = true
  confirmDialog.value = {
    title: '恢复默认设置',
    message: '这将恢复所有设置到默认值，您的游戏数据不会受到影响。确定要继续吗？',
    confirmText: '恢复默认',
    cancelText: '取消',
    type: 'warning',
    action: () => {
      Object.assign(localSettings, {
        soundEnabled: true,
        musicEnabled: true,
        masterVolume: 80,
        controlScheme: 'keyboard',
        difficulty: 'normal'
      })
      
      autoPauseEnabled.value = true
      showPerformanceInfo.value = false
      
      showNotification('设置已恢复默认值', 'success')
      console.log('设置已恢复默认值')
    }
  }
}

/**
 * 处理确认操作
 */
const handleConfirm = (): void => {
  confirmDialog.value.action()
  showConfirmDialog.value = false
}

/**
 * 处理取消操作
 */
const handleCancel = (): void => {
  showConfirmDialog.value = false
}

/**
 * 显示通知
 * @param message - 通知消息
 * @param type - 通知类型
 * @param duration - 显示时长
 */
const showNotification = (message: string, type: NotificationData['type'] = 'info', duration = 3000): void => {
  notification.message = message
  notification.type = type
  notification.duration = duration
  notification.show = true
}

/**
 * 关闭通知
 */
const closeNotification = (): void => {
  notification.show = false
}

/**
 * 加载设置
 */
const loadSettings = (): void => {
  try {
    const savedSettings = localStorage.getItem('gameSettings')
    if (savedSettings) {
      const data = JSON.parse(savedSettings)
      
      // 加载基础设置
      Object.assign(localSettings, data)
      
      // 加载扩展设置
      if (data.autoPauseEnabled !== undefined) {
        autoPauseEnabled.value = data.autoPauseEnabled
      }
      if (data.showPerformanceInfo !== undefined) {
        showPerformanceInfo.value = data.showPerformanceInfo
      }
      if (data.keyBindings) {
        keyBindings.value = data.keyBindings
      }
    }
    
    console.log('设置加载完成')
  } catch (error) {
    console.error('加载设置失败:', error)
  }
}

// 监听设置变化
watch(localSettings, (newSettings) => {
  console.log('设置发生变化:', newSettings)
}, { deep: true })

// 生命周期钩子
onMounted(() => {
  loadSettings()
})
</script>

<style lang="scss" scoped>
.settings-panel {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: $spacing-lg;

  .settings-header {
    text-align: center;
    margin-bottom: $spacing-xl;

    h2 {
      color: $text-color;
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: $spacing-sm;
    }

    .subtitle {
      color: $text-secondary;
      font-size: 1.1rem;
    }
  }

  .settings-content {
    .settings-section {
      background: $bg-primary;
      border-radius: $border-radius-lg;
      padding: $spacing-lg;
      margin-bottom: $spacing-lg;
      box-shadow: $shadow-md;
      border: 1px solid rgba(0, 0, 0, 0.05);

      .section-title {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        color: $text-color;
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: $spacing-lg;
        padding-bottom: $spacing-sm;
        border-bottom: 2px solid rgba($primary-color, 0.2);

        .section-icon {
          font-size: 1.2em;
        }
      }

      .setting-group {
        .setting-item {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding: $spacing-md 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);

          &:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }

          .setting-info {
            flex: 1;
            margin-right: $spacing-lg;

            .setting-label {
              display: block;
              color: $text-color;
              font-weight: 500;
              font-size: 1rem;
              margin-bottom: $spacing-xs;
            }

            .setting-description {
              color: $text-secondary;
              font-size: 0.9rem;
              line-height: 1.4;
              margin: 0;
            }
          }

          .setting-control {
            flex-shrink: 0;
            display: flex;
            align-items: center;

            .control-select,
            .difficulty-select {
              padding: $spacing-sm $spacing-md;
              border: 2px solid #e0e0e0;
              border-radius: $border-radius-md;
              background: $bg-primary;
              color: $text-color;
              font-size: 0.9rem;
              cursor: pointer;
              transition: $transition-normal;
              min-width: 150px;

              &:focus {
                outline: none;
                border-color: $primary-color;
              }

              &:hover {
                border-color: lighten($primary-color, 20%);
              }
            }

            .data-actions {
              display: flex;
              gap: $spacing-sm;
              flex-wrap: wrap;
            }
          }
        }

        // 按键绑定部分
        .key-bindings-section {
          margin-top: $spacing-md;
          padding-top: $spacing-md;
          border-top: 1px solid rgba(0, 0, 0, 0.1);

          .key-bindings-grid {
            display: grid;
            gap: $spacing-sm;

            .key-binding-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: $spacing-sm $spacing-md;
              background: rgba($primary-color, 0.05);
              border-radius: $border-radius-md;
              border: 1px solid rgba($primary-color, 0.1);

              .binding-info {
                flex: 1;

                .action-name {
                  display: block;
                  font-weight: 500;
                  color: $text-color;
                  margin-bottom: 2px;
                }

                .action-description {
                  font-size: 0.8rem;
                  color: $text-secondary;
                }
              }

              .key-button {
                padding: $spacing-xs $spacing-md;
                border: 2px solid $primary-color;
                background: $bg-primary;
                color: $primary-color;
                border-radius: $border-radius-sm;
                cursor: pointer;
                transition: $transition-normal;
                min-width: 80px;
                font-weight: 500;
                font-size: 0.9rem;

                &:hover {
                  background: $primary-color;
                  color: white;
                }

                &.recording {
                  background: $primary-color;
                  color: white;
                  animation: pulse 1s infinite;
                }
              }
            }
          }
        }
      }
    }
  }

  .settings-actions {
    display: flex;
    justify-content: center;
    gap: $spacing-md;
    margin-top: $spacing-xl;
    padding-top: $spacing-lg;
    border-top: 1px solid rgba(0, 0, 0, 0.1);

    .btn {
      padding: $spacing-md $spacing-xl;
      border: none;
      border-radius: $border-radius-lg;
      cursor: pointer;
      transition: $transition-normal;
      font-size: 1rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: $spacing-sm;

      &.btn-primary {
        background: $primary-color;
        color: white;

        &:hover {
          background: darken($primary-color, 10%);
          transform: translateY(-2px);
        }
      }

      &.btn-secondary {
        background: $secondary-color;
        color: white;

        &:hover {
          background: darken($secondary-color, 10%);
          transform: translateY(-2px);
        }
      }

      &.btn-danger {
        background: $danger-color;
        color: white;

        &:hover {
          background: darken($danger-color, 10%);
          transform: translateY(-2px);
        }
      }

      &.btn-small {
        padding: $spacing-xs $spacing-sm;
        font-size: 0.8rem;
      }

      .btn-icon {
        font-size: 1.1em;
      }
    }
  }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

// 响应式设计
@import '@/styles/responsive.scss';

@include mobile-all {
  .settings-panel {
    padding: $spacing-md;

    .settings-header {
      margin-bottom: $spacing-lg;

      h2 {
        font-size: 1.8rem;
      }

      .subtitle {
        font-size: 1rem;
      }
    }

    .settings-content {
      .settings-section {
        padding: $spacing-md;
        margin-bottom: $spacing-md;

        .section-title {
          font-size: 1.2rem;
          margin-bottom: $spacing-md;

          .section-icon {
            font-size: 1.1em;
          }
        }

        .setting-group {
          .setting-item {
            flex-direction: column;
            align-items: flex-start;
            gap: $spacing-md;
            padding: $spacing-sm 0;

            .setting-info {
              margin-right: 0;

              .setting-label {
                font-size: 0.95rem;
              }

              .setting-description {
                font-size: 0.85rem;
              }
            }

            .setting-control {
              width: 100%;

              .control-select,
              .difficulty-select {
                width: 100%;
                min-width: auto;
                padding: $spacing-sm;
                font-size: 0.9rem;
              }

              .data-actions {
                width: 100%;
                flex-direction: column;
                gap: $spacing-xs;

                .btn {
                  width: 100%;
                  justify-content: center;
                  padding: $spacing-sm $spacing-md;
                  font-size: 0.9rem;
                }
              }
            }
          }

          .key-bindings-section {
            margin-top: $spacing-sm;
            padding-top: $spacing-sm;

            .key-bindings-grid {
              gap: $spacing-xs;

              .key-binding-item {
                flex-direction: column;
                gap: $spacing-sm;
                text-align: center;
                padding: $spacing-sm;

                .binding-info {
                  .action-name {
                    font-size: 0.9rem;
                  }

                  .action-description {
                    font-size: 0.75rem;
                  }
                }

                .key-button {
                  width: 100%;
                  min-width: auto;
                  padding: $spacing-sm;
                  font-size: 0.85rem;
                }
              }
            }
          }
        }
      }
    }

    .settings-actions {
      flex-direction: column;
      gap: $spacing-sm;
      margin-top: $spacing-lg;

      .btn {
        width: 100%;
        justify-content: center;
        padding: $spacing-md;
        font-size: 1rem;
      }
    }
  }
}

@include mobile-small {
  .settings-panel {
    padding: $spacing-sm;

    .settings-header {
      h2 {
        font-size: 1.6rem;
      }

      .subtitle {
        font-size: 0.9rem;
      }
    }

    .settings-content {
      .settings-section {
        padding: $spacing-sm;

        .section-title {
          font-size: 1.1rem;
          margin-bottom: $spacing-sm;
        }

        .setting-group {
          .setting-item {
            gap: $spacing-sm;
            padding: $spacing-xs 0;

            .setting-info {
              .setting-label {
                font-size: 0.9rem;
              }

              .setting-description {
                font-size: 0.8rem;
              }
            }

            .setting-control {
              .data-actions {
                .btn {
                  padding: $spacing-xs $spacing-sm;
                  font-size: 0.85rem;

                  .btn-icon {
                    font-size: 1em;
                  }
                }
              }
            }
          }

          .key-bindings-section {
            .key-bindings-grid {
              .key-binding-item {
                padding: $spacing-xs;

                .binding-info {
                  .action-name {
                    font-size: 0.85rem;
                  }

                  .action-description {
                    font-size: 0.7rem;
                  }
                }

                .key-button {
                  padding: $spacing-xs $spacing-sm;
                  font-size: 0.8rem;
                }
              }
            }
          }
        }
      }
    }

    .settings-actions {
      .btn {
        padding: $spacing-sm $spacing-md;
        font-size: 0.95rem;

        .btn-icon {
          font-size: 1em;
        }
      }
    }
  }
}

// 横屏模式优化
@include landscape {
  @include mobile-all {
    .settings-panel {
      .settings-content {
        .settings-section {
          .setting-group {
            .setting-item {
              flex-direction: row;
              align-items: center;
              gap: $spacing-md;

              .setting-info {
                flex: 1;
                margin-right: $spacing-md;
              }

              .setting-control {
                width: auto;
                flex-shrink: 0;

                .control-select,
                .difficulty-select {
                  width: 200px;
                }

                .data-actions {
                  flex-direction: row;
                  width: auto;

                  .btn {
                    width: auto;
                    padding: $spacing-xs $spacing-sm;
                    font-size: 0.8rem;
                  }
                }
              }
            }

            .key-bindings-section {
              .key-bindings-grid {
                .key-binding-item {
                  flex-direction: row;
                  text-align: left;

                  .key-button {
                    width: 100px;
                  }
                }
              }
            }
          }
        }
      }

      .settings-actions {
        flex-direction: row;
        justify-content: center;

        .btn {
          width: auto;
          min-width: 150px;
        }
      }
    }
  }
}

// 触摸设备优化
@include touch-device {
  .settings-panel {
    .settings-content {
      .settings-section {
        .setting-group {
          .setting-item {
            .setting-control {
              .control-select,
              .difficulty-select {
                min-height: 44px;
                -webkit-appearance: none;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right 12px center;
                background-size: 16px;
                padding-right: 40px;
              }

              .data-actions {
                .btn {
                  min-height: 44px;
                  -webkit-tap-highlight-color: transparent;

                  &:active {
                    transform: scale(0.98);
                  }
                }
              }
            }
          }

          .key-bindings-section {
            .key-bindings-grid {
              .key-binding-item {
                .key-button {
                  min-height: 44px;
                  -webkit-tap-highlight-color: transparent;

                  &:active {
                    transform: scale(0.98);
                  }
                }
              }
            }
          }
        }
      }
    }

    .settings-actions {
      .btn {
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}

// 平板端优化
@include tablet-all {
  .settings-panel {
    max-width: 900px;
    padding: $spacing-xl;

    .settings-content {
      .settings-section {
        padding: $spacing-xl;

        .setting-group {
          .setting-item {
            .setting-control {
              .data-actions {
                flex-direction: row;
                width: auto;

                .btn {
                  width: auto;
                  min-width: 120px;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 桌面端优化
@include desktop-all {
  .settings-panel {
    max-width: 1000px;
    padding: $spacing-xxl;

    .settings-content {
      .settings-section {
        padding: $spacing-xxl;

        .section-title {
          font-size: 1.4rem;
        }

        .setting-group {
          .setting-item {
            padding: $spacing-lg 0;

            .setting-info {
              .setting-label {
                font-size: 1.1rem;
              }

              .setting-description {
                font-size: 1rem;
              }
            }
          }
        }
      }
    }

    .settings-actions {
      .btn {
        padding: $spacing-lg $spacing-xxl;
        font-size: 1.1rem;
      }
    }
  }
}
</style>